<template>
  <view class="all">
    <view class="focus-advertising-container">
      <!-- 除了三个的布局 -->
      <view class="focus-other-layout" v-if="props.data.list && props.data.list.length !== 3 && props.data?.list?.length">
        <view class="focus-advertising-item item-border" v-for="item in props.data.list" :key="item">
          <image class="focus-item-image" :src="item.imgUrl" alt="" />
        </view>
      </view>

      <view class="focus-three-layout" v-if="props.data.list && props.data.list.length === 3 && props.data?.list?.length">
        <view class="focus-advertising-item item-border">
          <image class="focus-item-image" :src="props.data.list[0].imgUrl" alt="" />
        </view>
        <view class="focus-advertising-item-container">
          <view class="focus-advertising-item-child item-border" v-for="item in props.data.list.slice(1)" :key="item">
            <image class="focus-item-image" :src="item.imgUrl" alt="" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
</script>

<style lang="scss" scoped>
.all {
  background-color: white;
  display: flex;
  justify-content: center;
  padding: 20rpx 0rpx;
}

.focus-advertising-container {
  width: calc(100vw - 20px);
  // padding-left: 20rpx;

  .focus-other-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;

    .focus-advertising-item {
      width: 49%;
      min-height: 240rpx;
      box-sizing: border-box;
      border-radius: 8rpx;
      overflow: hidden;

      .focus-item-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .focus-three-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .focus-advertising-item {
      width: 39%;
      min-height: 240px;
      border-radius: 8rpx;
      overflow: hidden;

      .focus-item-image {
        width: 100%;
        height: 100%;
        margin-bottom: 0;
      }
    }

    .focus-advertising-item-container {
      width: 59%;
      min-height: 240px;

      .focus-advertising-item-child {
        width: 100%;
        height: 49%;
        border-radius: 8rpx;
        overflow: hidden;

        .focus-item-image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
